<template>
  <view class="template-king tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>

    <!-- 顶部 -->
    <view>
      <view class="tn-strip-bottom">
        <!-- <view class="slideshow">
          <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg')">
          </view>
          <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg')">
          </view>
          <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg')">
          </view>
          <view class="slideshow-image" style="background-image: url('https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg')">
          </view>
        </view> -->
		<view class="slideshow">
		  <view v-for="(image, index) in groupList" :key="index" class="slideshow-image" :style="'background-image: url(' + image.url + ')'">
		  </view>
		</view>
		<view class="beibei">
		  <view class="beibei2" :style="'background-image: url(' + groupList[0].url + ')'"></view>
		</view>

        <view class='tn-margin tn-padding-top-sm'>
          <view class="tn-text-bold">
            <text class='tn-text-xxl tn-padding-right'>{{ message.name }}</text>
            <!-- <text class='tn-text-lg tn-color-purple'>{{message.ifVip === 0?'非会员':'钻石会员' }}</text> -->
			 <text class='' :style="{ display: message.ifVip === 0 ? 'block' : 'none' }"></text>  
			<text class='tn-icon-vip-text' :style="{ display: message.ifVip !== 0 ? 'block' : 'none' }"></text>
          </view>
		  
          <view class="tn-margin-top-lg">
            <text class="tn-text-lg">{{ message.age ? message.age : '0' }}岁  ·  {{ message.height ? (message.height === 0 ? '保密' : `${message.height}cm`) : '保密' }}  ·  {{ message.educationBackground ? (message.educationBackground === 0 ? '保密' : message.educationBackground) : '保密' }}</text>
          </view>
		  <view class="tn-margin-top-lg">
		    <text class="tn-text-lg">{{ memberFamily.duties ? memberFamily.duties : '保密' }}  ·  {{ memberFamily.jobNature ? (memberFamily.jobNature === 0 ? '保密' : memberFamily.jobNature) : '保密' }}  ·  {{ memberFamily.annualSalary ? (memberFamily.annualSalary === 0 ? '保密' : memberFamily.annualSalary) : '保密' }}</text>
		  </view>

        </view>
      </view>





      <view class="king-list tn-margin-top-sm">

        <view class="king-icon">
          <text class='tn-icon-creative tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
          <text class='tn-text-xl tn-margin-left'>基本信息</text>
        </view>
        <view class='king-item tn-color-red tn-icon-circle-fill'>
          <view class="resume2">
            <text class="">
              {{ message.marriageHistory === 1 ? '离异' : '未婚' }}  ·  {{ message.height ? (message.height === 0 ? '保密' : `${message.height}cm`) : '保密' }}  ·  {{ message.weight ? (message.weight === 0 ? '保密' : `${message.weight}kg`) : '保密' }}
            </text>
          </view>
		  <view class="resume2">
		    <text class="">  
		      {{ message.nation ? message.nation : '保密' }}  ·  {{ message.starSign ? (message.starSign === 0 ? '保密' : message.starSign) : '保密' }}    
		    </text>
		  </view>
		  <view class="resume2">
		    <text class="">  
		      {{ message.birthPlace ? message.birthPlace : '保密' }}  ·  现居{{ message.presentPlace ? (message.presentPlace === 0 ? '保密' : message.presentPlace) : '保密' }}  
		    </text>
		  </view>
        </view>
		<view class="king-icon">
		  <text class='tn-icon-creative tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
		  <text class='tn-text-xl tn-margin-left'>性格与兴趣</text>
		</view>
		<view class='king-item tn-color-red tn-icon-circle-fill'>
		  <view class="resume2">
		    <text class="">
				性格与爱好：
		      {{ memberHobby.ifDrink ===1? '烟友':'不抽烟' }}  ·  {{ memberHobby.ifSmoke ===1? '酒友':'不喝酒' }}  ·  {{ memberHobby.personalityTraits ? (memberHobby.personalityTraits === 0 ? '保密' : memberHobby.personalityTraits) : '保密' }}
		    </text>
		  </view>
		</view>
        
        <view class="king-icon">
          <text class='tn-icon-company tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
          <text class='tn-text-xl tn-margin-left'>自我介绍</text>
        </view>
        <view class='king-item tn-color-red tn-icon-circle-fill'>
          <view>
            <view class="resume2">
              <text class="text-style"> {{ memberHobby.selfIntroduction? (memberHobby.selfIntroduction === 0 ? '保密' : memberHobby.selfIntroduction) : '保密' }}</text>
            </view>
          </view>
        </view>
		<view class="king-icon">
		  <text class='tn-icon-company tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
		  <text class='tn-text-xl tn-margin-left'>家庭与车房</text>
		</view>
		<view class='king-item tn-color-red tn-icon-circle-fill'>
		  <view>
		    <view class="resume2">
		      <text>
				购房情况：
			  {{ memberFamily.houseSituation? (memberFamily.houseSituation === 0 ? '保密' : memberFamily.houseSituation) : '保密' }}
				购车情况：
				{{ memberFamily.carSituation? (memberFamily.carSituation === 0 ? '保密' : memberFamily.carSituation) : '保密' }}		
			  </text>
		    </view>
		  </view>
		</view>
        

        <view class="king-icon">
          <text class='tn-icon-tag tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
          <text class='tn-text-xl tn-margin-left'>外貌特征</text>
        </view>
        <view class='king-item tn-color-red tn-icon-circle-fill'>
          <view class="resume">
            
            <view class="tn-tag-content tn-text-justify">
              <view v-for="(item, index) in tagList " :key="index" class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
                <text class="tn-tag-content__item--prefix"></text> {{ item ===null||item===''? '保密': item }}
              </view>
            </view>


          </view>
        </view>


      </view>




     <view class="tn-margin-top tn-padding-top-sm tn-margin-bottom">
        <!-- <view class="see">
          
          <view class="justify-content-item tn-flex tn-flex-col-center">
            <view style="margin-right: 10rpx;margin-left: 30rpx;">
              <tn-avatar-group :lists="groupList" size="sm"></tn-avatar-group>
            </view>
          </view>
          <!-- <view class="tn-margin-right">
            <text class='tn-color-grey tn-text-df tn-margin-right-sm'>12.9W 查看 </text>
            <text class='tn-color-grey tn-text-df'> 3.2K 分享</text>
          </view> -->
          
        </view>
      </view>

      <!-- <view class="action cf" bindtap="showModal" data-target="bottomModal">
        <image src='/static/images/admin.jpg' class='edit' mode='aspectFit'></image>
      </view> -->
      <!-- <button class='' open-type="contact">
        <image src='/static/images/admin.jpg' class='share-img png round shadow-lg bg-white' mode='aspectFit'>
        </image>
      </button> -->
	  <view class="tn-flex tn-flex-row-between">  
	    <view class="justify-content-item tn-margin-xs tn-text-center" style="width: 300rpx; position: fixed; bottom: 20rpx; left: 40rpx;">  
	      <tn-button shape="round" backgroundColor="#ff557f" padding="40rpx 0" width="90%" shadow fontBold @click="tnChat(message.userId,chatId, message.name)">  
	        <text class=" tn-padding-right-xs tn-color-black"></text>  
	        <text class="tn-color-black">联系TA</text>  
	      </tn-button>  
	    </view>  
	    <view class="justify-content-item tn-margin-xs tn-text-center" style="width: 300rpx; position: fixed; bottom: 20rpx; right: 40rpx;">  
	      <tn-button shape="round" backgroundColor="tn-cool-bg-color-2" padding="40rpx 0" width="90%" shadow fontBold @click="tn('/circlePages/blogger?'+userId)">  
	        <text class=" tn-padding-right-xs tn-color-black"></text>  
	        <text class="tn-color-black">TA的圈子</text>  
	      </tn-button>  
	    </view>  
	  </view>
    </view>



  </view>

</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import request from "@/common/request.js"
  export default {
    name: 'TemplateKing',
    mixins: [template_page_mixin],
    data(){
      return {
		userId:0,
		chatId:0,
        tagList: [
			
			//这里放的是性格外貌
          this.tagList
   //        {
   //          // color: 'cyan','blue','green','purplered','purple','brown','yellowgreen','lime','grey',
			// color: 'cyan',
   //          title: this.tagList,
   //        },
          // {
          //   color: 'blue',
          //   title: "开心吃货",
          // },
          // {
          //   color: 'green',
          //   title: "爱花草",
          // },
          // {
          //   color: 'orange',
          //   title: "产品经理",
          // },
          // {
          //   color: 'purplered',
          //   title: "健身女王",
          // },
          // {
          //   color: 'purple',
          //   title: "创意设计",
          // },
          // {
          //   color: 'brown',
          //   title: "腹黑",
          // },
          // {
          //   color: 'yellowgreen',
          //   title: "水果控",
          // },
          // {
          //   color: 'lime',
          //   title: "bug多多",
          // },
          // {
          //   color: 'grey',
          //   title: "蠢萌蠢萌",
          // }
        ],
        groupList: [
			this.groupList
        ],
		message: [this.message],
		memberHobby: [this.memberHobby],
		memberFamily: [this.memberFamily]
      }
    },
	onLoad: function(options) {
		let userId = options.userId // 将 userId 转换为整数
		this.memberDetails(userId)
		this.selectPictures(userId)
		this.createChat(userId)
		this.userId = userId
		//console.log(userId)
	},
	mounted() {  
	    // 每2秒更新一次索引，实现图片轮播  
	    setInterval(() => {  
	      this.index = (this.index + 1) % this.groupList.length;  
	    }, 2000);  
	  },  
	
    methods: {
      memberDetails(userId){
      	request.get("friend/wx/member/"+userId,{}).then(res=>{
						console.log("#########")
      				  let _data = res[1]['data']
      				  console.log(_data.code)
      				  if(_data.code == 20000){
      					  console.log(_data)
      					  this.message = _data.data.memberInfo
						  this.memberHobby=_data.data.memberHobby
						  this.memberFamily=_data.data.memberFamily
						  let splitTagList = _data.data.memberHobby.physicalDesc
						  this.tagList = splitTagList.split(',');
      					  console.log(this.message)
      					  console.log(this.memberHobby)
      					  console.log(this.memberFamily)
						  console.log(this.tagList)
						  }
      	});
      },
	 // 跳转
	 tn(e) {
	 	uni.navigateTo({
	 		url: e,
	 	});
	 },
	 tnChat(id,chatId,name){
		 console.log(this.chatId)
	 			  uni.navigateTo({
	 				url:"/pages/chat/chat?toUserId="+id+"&chatId="+chatId+"&name="+name
	 				// url:"/pages/chat/detail"
	 			  })
	 },
	 // insertMemberLike(likeUserId){
		//  let _t = this
	 // 	request.post("friend/wx/member/addLike",{likeUserId}).then(res=>{
	 // 		console.log("#########传过来的喜欢的人的userId"+likeUserId)
	 // 		console.log(res)
	 // 		let _data = res[1]['data']
		// 	console.log(_data)
	 // 		if(_data.code == 20000){
	 // 			uni.showModal({
	 // 				content:"添加成功",
	 // 				complete(){
	 // 					_t.goBack();
	 // 				}
	 // 			})
	 // 			//console.logs("@@@@@@@@@@@@@2"+this.addActivity)
	 // 			}else if(_data.code == 401){
	 // 				this.turnLogin()
	 // 			}else if(_data.code == 400){
		// 			console.log("$$$$$$$$$$$$$$$")
	 // 				uni.showModal({
	 // 					content:"您已经喜欢TA了",
	 // 				})
	 // 			}
	 // 	});
	 // },
	 selectPictures(userId){
		 request.get("friend/wx/member/selectPictures/"+userId,{}).then(res=>{
		 			  let _data = res[1]['data']
		 			  if(_data.code == 20000){this.groupList = _data.data}
		 });
	 },
	 //调用创建会话接口，获取会话id
	  createChat(userId){
	  	request.get("friend/wx/chatCenter/createChatRecord/"+userId,{}).then(res=>{
	  				  let _data = res[1]['data']
	  				  if(_data.code == 20000){this.chatId = _data.data}
	  	});
	  },
    },
	
	 
	
  }
</script>

<style lang="scss" scoped>
  
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  /* 主图固定 */
  .beibei{
      width:100%;
      height:1000upx;
  }
  .beibei2{
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100%;
      width: 100%;
      position: relative;
      background-position: center center;
      background-size: cover;
  }
  /* 相册 */
  .slideshow {
    top: 0;
    position: absolute;
    width: 100vw;
    height: 1000upx;
    overflow: hidden;
  }

  .slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
    animation-name: kenburns;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    opacity: 1;
    transform: scale(1.2);
  }

  .slideshow-image:nth-child(1) {
    -webkit-animation-name: kenburns-1;
    animation-name: kenburns-1;
    z-index: 3;
  }

  .slideshow-image:nth-child(2) {
    -webkit-animation-name: kenburns-2;
    animation-name: kenburns-2;
    z-index: 2;
  }

  .slideshow-image:nth-child(3) {
    -webkit-animation-name: kenburns-3;
    animation-name: kenburns-3;
    z-index: 1;
  }

  .slideshow-image:nth-child(4) {
    -webkit-animation-name: kenburns-4;
    animation-name: kenburns-4;
    z-index: 0;
  }

  @-webkit-keyframes kenburns-1 {
    0% {
      opacity: 1;
      transform: scale(1.2);
    }

    1.5625% {
      opacity: 1;
    }

    23.4375% {
      opacity: 1;
    }

    26.5625% {
      opacity: 0;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(1.2);
    }

    98.4375% {
      opacity: 0;
      transform: scale(1.2117647059);
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes kenburns-1 {
    0% {
      opacity: 1;
      transform: scale(1.2);
    }

    1.5625% {
      opacity: 1;
    }

    23.4375% {
      opacity: 1;
    }

    26.5625% {
      opacity: 0;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(1.2);
    }

    98.4375% {
      opacity: 0;
      transform: scale(1.2117647059);
    }

    100% {
      opacity: 1;
    }
  }

  @-webkit-keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      transform: scale(1.2);
    }

    26.5625% {
      opacity: 1;
    }

    48.4375% {
      opacity: 1;
    }

    51.5625% {
      opacity: 0;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      transform: scale(1.2);
    }

    26.5625% {
      opacity: 1;
    }

    48.4375% {
      opacity: 1;
    }

    51.5625% {
      opacity: 0;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @-webkit-keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      transform: scale(1.2);
    }

    51.5625% {
      opacity: 1;
    }

    73.4375% {
      opacity: 1;
    }

    76.5625% {
      opacity: 0;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      transform: scale(1.2);
    }

    51.5625% {
      opacity: 1;
    }

    73.4375% {
      opacity: 1;
    }

    76.5625% {
      opacity: 0;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @-webkit-keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      transform: scale(1.2);
    }

    76.5625% {
      opacity: 1;
    }

    98.4375% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: scale(1);
    }
  }

  @keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      transform: scale(1.2);
    }

    76.5625% {
      opacity: 1;
    }

    98.4375% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: scale(1);
    }
  }


  /* 简历内容 */
  .king-list {
    display: block;
    background-color: #ffffff;
  }
  
  .king-list .king-icon {
    width: 100%;
    text-align: left;
    padding: 20rpx 0 20rpx 37rpx;
    font-size: 26rpx;
    color: #888;
    display: block;
  }
  
  .king-list>.king-item {
    padding: 30rpx 30rpx 30rpx 120rpx;
    position: relative;
    display: block;
    z-index: 0;
  }

  .king-list>.king-item::after {
    content: "";
    display: block;
    position: absolute;
    width: 1rpx;
    background-color: #E6E6E6;
    left: 60rpx;
    height: 100%;
    top: 0;
    z-index: 8;
  }

  .king-list>.king-item::before {
    display: block;
    position: absolute;
    top: 36rpx;
    z-index: 9;
    background-color: #ffffff;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    border: none;
    line-height: 50rpx;
    left: 36rpx;
  }


  /* 名片微调 */
  .img-solid {
    border: 2rpx solid #eee;
  }

  .share-img {
    position: fixed;
    /* padding: 10rpx; */
    width: 100rpx;
    height: 100rpx;
    /* top: 680rpx; */
    bottom: 200rpx;
    right: 20rpx;
    z-index: 1024;
    opacity: 0.8;
    box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
    border: none;
    border: 6rpx solid rgba(255, 255, 255, 0);
  }

  .resume {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    border-radius: 6rpx;
    color: #666;
    line-height: 1.6;
  }

  .resume+.resume {
    margin-top: 20rpx;
  }

  .resume2 {
    padding-top: 10rpx;
    border-radius: 6rpx;
    display: block;
    color: #666;
    line-height: 1.6;
    text-align: justify;
  }
  
  /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
   /* 间隔线 end*/


  .bg-img-cont {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 350rpx;
    margin: 20rpx 0;
    border-radius: 8rpx;
  }



  // .button-no {
  //   border: none;
  //   width: 100%;
  //   height: 100%;
  //   background-color: rgba(0, 0, 0, 0);
  // }
  
  
  /* 标签内容 start*/
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 45rpx;
      padding: 10rpx 30rpx;
      margin: 0rpx 20rpx 25rpx 0rpx;
      
      &--prefix {
        padding-right: 10rpx;
      }  
    }
  }
  /* 标签内容 end*/
  
  .see {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    border-radius: 6rpx;
    color: #666;
    line-height: 1.6;
  }
    .tn-margin-top-lg {
      margin-top: 12px;
    }

    .tn-text-lg {
      font-size: 12px;
      color: #333;
    }
	.tn-text-xxl{
		font-size: 24px;
	}
	.text-style {  
	  // white-space: pre-wrap; /* 自动换行 */  
	  // text-indent: 20em; /* 首行缩进两格 */  
	  text-indent: 2em; /* 首行缩进两格 */
	}
	.tn-color-purple{
		color: purple;
	}
	.tn-icon-vip-text {
		text-align: left; 
	      color: purple; 
			font-size: 30px;
	    }

</style>
